<template>
  <div>

	<myheader></myheader>
	

	<section class="featured-block text-center">
		<div class="container">
			
			<Breadcrumb :datas='datas'></Breadcrumb>
			<form>
			<table>
				<tr>
					<td>用户名：<input type="text" v-model="username"></td>
				</tr>
				<tr>
					<td>密码：<input type="password" v-model="password"></td>
				</tr>
				<tr>
					<td>
						<!-- 滑块验证码 -->
						<drag-verify
							:width="width"
							:height="height"
							:text="text"
							ref="Verify"
						>
						</drag-verify>
					</td>
				</tr>
				<tr>
					<td><Button @click="sub">登录</Button>&nbsp;&nbsp;<Button @click="clear">重置</Button></td>
				</tr>
				<tr>
					<td>
						<img :src="adminurl + '/static/sina.png'" @click="weibologin" style="cursor:pointer">
						<img :src="adminurl + '/static/dingding.png'" @click="dingdinglogin" style="cursor:pointer">
					</td>
				</tr>
			</table>
			</form>


		</div>
	</section>
	

	<myfooner></myfooner>

  </div>
  
</template>


 
<script>
import myheader from './myheader'
import myfooner from './myfooner'
import dragVerify from 'vue-drag-verify'
import {config} from '../config'

export default {
  data () {
    return {
	  msg: "这是一个变量",
		//   面包屑导航
		datas:[{title:"首页",route:{name:"index"}},{title:"登录页面"}],
		username:"",
		password:"",
		// 滑块验证码参数
		text:"请将滑块拖动到最右处",
		width:250,
		height:40,
		adminurl:config['adminurl'],
		

    }
  },
  components:{
	  "myheader":myheader,
	  "myfooner":myfooner,
		"dragVerify":dragVerify

  },
  mounted:function(){

   
  
},
  methods:{
	  sub(){
			// 用户名是否为空
		  if(this.username == ""){
			  this.$Message('用户名不能为空')
			  return false
		  };
			// 密码是否为空
		  if(this.password == ""){
			  this.$Message('密码不能为空')
			  return false
		  };
			// 滑块是否拖动
			if(this.$refs.Verify.isPassing == false){
				this.$Message('请拖动验证码')
				return false
			}

		  
		  this.axios.get(this.adminurl + '/login/',{params:{username:this.username,password:this.password}}).then(res=>{
				this.$Message(res.data.message);
				if(res.data.code == 200){
					this.$router.push('/')
					localStorage.setItem('uid',res.data.uid)
					localStorage.setItem('username',res.data.username)
					localStorage.setItem('token',res.data.token)
				}
				
		  })



	  },
	  clear(){
		  this.username = "";
		  this.password = ""
	  },
		weibologin(){
			let url = "https://api.weibo.com/oauth2/authorize?client_id=2644557550&response_type=code&redirect_uri="+this.adminurl+"/weibo_back/"
			window.location.href = url
		},
		dingdinglogin(){
			let url = "https://oapi.dingtalk.com/connect/qrconnect?appid=dingoasyyehyz5u1fzgmcv&response_type=code&scope=snsapi_login&state=STATE&redirect_uri="+this.adminurl+"/dingding_back"
			window.location.href = url
		}
     
  }
}


</script>
 
<style>



</style>